<!-- wangEditor -->
<template>
    <Toolbar
        class="editor-tools"           
        :editor="editorRef"
        :default-config="toolConfig"
        mode="default">
    </Toolbar>
    <Editor
        class="editor-content"
        style="flex: 1;"
        v-model="valueHTML"
        :default-config="editorConfig"
        mode="simple"
        @onCreated="handleCreated">
    </Editor>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'
import { ref, shallowRef } from 'vue'
import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const editorRef = shallowRef()
const valueHTML = ref('<p></p>')

const handleCreated = (editor: any) => {
    console.log(editor.getAllMenuKeys())
    editorRef.value = editor
}

// 工具配置
const toolConfig: Partial<IToolbarConfig> = {}
toolConfig.toolbarKeys = [
    'undo', // 撤销
    'redo', // 重做
    '|',
    'bold', // 粗体
    'italic', // 斜体
    'underline', // 下划线
    'color', // 颜色
    'bgColor', // 背景色
    '|',
    'headerSelect', // 正文
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'divider', // 分割线
    'blockquote', // 引用
    '|',
    'insertLink', // 插入链接
    'unLink', // 消除链接
    'uploadImage' // 上传图片
]

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.placeholder = '请输入正文...'
editorConfig.scroll = false
</script>

<style lang="less">
.w-e-toolbar {
    justify-content: space-between;
}
.w-e-bar-item {
    button:hover .active {
        background-color: var(--color-gray-s);
    }
}
.editor-tools {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: -webkit-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: -20px;
    z-index: 998;
}
</style>
